<!--
 * @Author       : 哈喽 1599321283@qq.com
 * @Date         : 2025-02-25 17:53
 * @LastEditors  : 哈喽 1599321283@qq.com
 * @LastEditTime : 2025-03-16 22:06
 * @FilePath     : /练习/aaa/src/components/Tabbar/index.vue
 * @Description  : 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <van-tabbar 
    v-model="active" 
    :placeholder="true" 
    :route="true" 
    fixed
    class="custom-tabbar"
  >
    <van-tabbar-item
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :to="item.to"
    >
      {{ item.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

const active = ref(0);
const tabbarData = reactive([
  {
    icon: "gem-o",
    title: "天机罗盘",
    to: {
      name: "Fortune",
    },
  },
  {
    icon: "user-circle-o",
    title: "会员中心",
    to: {
      name: "Membership",
    },
  },
]);
</script>

<style lang="less" scoped>
.custom-tabbar {
  :deep(.van-tabbar) {
    background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  }

  :deep(.van-tabbar-item) {
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    
    /* 新增图标缩放效果 */
    &__icon {
      transform: scale(0.9);
      transition: transform 0.3s ease;
    }
  }

  :deep(.van-tabbar-item--active) {
    color: #fff;
    background-color: #6d28d9;
    /* 增强图标效果 */
    .van-tabbar-item__icon {
      transform: scale(1.1);
      filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3));
    }

    /* 文字强调效果 */
    .van-tabbar-item__text {
      font-weight: 500;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* 顶部指示线替代底部指示器 */
    &::before {
      content: "";
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 2px;
      background: #fff;
      border-radius: 1px;
      opacity: 0.8;
    }
  }

  :deep(.van-tabbar-item__icon) {
    color: inherit;
  }

  :deep(.van-tabbar-item__text) {
    color: inherit;
    /* 添加微弱的文字阴影提高可读性 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
}
</style>
